<%@ include file="../shared/standardDirectives.jspf" %>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
	function dump(arr,level) {
	    var dumped_text = "";
	    if(!level) level = 0;
	
	    var level_padding = "";
	    for(var j=0;j<level+1;j++) level_padding += "    ";
	
	    if(typeof(arr) == 'object') {  
	        for(var item in arr) {
	            var value = arr[item];
	
	            if(typeof(value) == 'object') { 
	                dumped_text += level_padding + "'" + item + "' ...\n";
	                dumped_text += dump(value,level+1);
	            } else {
	                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
	            }
	        }
	    } else { 
	        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	    }
	    return dumped_text;
	}
</script>
<script>
	var center = new google.maps.LatLng(28.649639,77.339308);
	var neighborhoods = [];
	var markers =[];
	var iterator = 0;
	
	var map;
	
	var geocoderFrom = new google.maps.Geocoder();  

	var geocoder = new google.maps.Geocoder(); 
	
	function initialize(){
		var mapOptions = {
			zoom: 13,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center: center
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		<c:forEach var="path" items="${searchRouteForm.result.path}" varStatus="status">
		neighborhoods.push(new google.maps.LatLng(<c:out value="${path.location}"></c:out>));
		</c:forEach>
	}
	$(document).ready(function(){
		alert(map);
		if(map ==null){
			initialize();
		}
		$('#drop').click(drop);
	});
	function drop() {
		for (var i = 0; i < neighborhoods.length; i++) {
			setTimeout(function() {
	        	addMarker();
	      	}, i * 200);
	    }
	  }
	function addMarker() {
		markers.push(new google.maps.Marker({
	      position: neighborhoods[iterator],
	      map: map,
	      draggable: false,
	      animation: google.maps.Animation.DROP
	    }));
	    iterator++;
  	}
  	      
</script>
<table id="rounded-corner" summary="2007 Major IT Companies' Profit">
					<thead>
						<tr>
							<th scope="col" class="rounded-company">Route</th>
							<th scope="col" class="rounded-q1">Depart</th>
							<th scope="col" class="rounded-q1">Arrive</th>
							<th scope="col" class="rounded-q2">Duration</th>
							<th scope="col" class="rounded-q3">Interchanges</th>
							<th scope="col" class="rounded-q4"></th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<td colspan="5" class="rounded-foot-left"><em>The above
									data were fictional and made up, please do not sue me</em>
							</td>
							<td class="rounded-foot-right">&nbsp;</td>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td>1</td>
							<td>20.3</td>
							<td>30.5</td>
							<td>23.5</td>
							<td>40.3</td>
							<td><input type="button" value="View" class="rounded {transparent} button" onclick="javascript:alert('Not Implemented')"> </td>
						</tr>
						<tr>
							<td>2</td>
							<td>50.2</td>
							<td>40.63</td>
							<td>45.23</td>
							<td>39.3</td>
							<td><input type="button" value="View" class="rounded {transparent} button" onclick="javascript:alert('Not Implemented')"> </td>
						</tr>
						<tr>
							<td>3</td>
							<td>25.4</td>
							<td>30.2</td>
							<td>33.3</td>
							<td>36.7</td>
							<td><input type="button" value="View" class="rounded {transparent} button" onclick="javascript:alert('Not Implemented')"> </td>
						</tr>
						<tr>
							<td>4</td>
							<td>20.4</td>
							<td>15.6</td>
							<td>22.3</td>
							<td>29.3</td>
							<td><input type="button" value="View" class="rounded {transparent} button" onclick="javascript:alert('Not Implemented')"> </td>
						</tr>
					</tbody>
				</table>
	<html:form action="/route/search.do">
		<table id="rounded-corner" summary="Plan your journey">
			<thead>
				<tr>
					<th scope="col" class="rounded-company">Plan Your Journey</th>
					<th align="left">Search Result</th>
					<th align="left">Route Map</th>
				</tr>
			</thead>
			<tr valign="top">
				<td>
					<table  border="0">
						<tbody>
							<tr>
								<th align="right">From:</th>
								<td>
									<html:hidden name="searchRouteForm" property="from" styleId="from"/>
									<html:text name="searchRouteForm" property="fromStr" styleId="fromStr" />
								</td>
								<td>
									<html:select property="originType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<th align="right">To:</th>
								<td>
									<html:hidden name="searchRouteForm" property="to" styleId="to"/>
									<html:text name="searchRouteForm" property="toStr" styleId="toStr"/>
								</td>
								<td>
									<html:select property="destinationType" styleClass="input">
										<html:optionsCollection property="types" label="name" value="id" />
									</html:select>
								</td>
								<td>&nbsp;</td>
							</tr>
							<tr><td colspan="3"></td></tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:img src="../../images/icon-tube.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-buses.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-bike.gif"/></td>
											<td width="40" align="center"><html:img src="../../images/icon-walk.gif"/></td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td colspan="3">
									<table>
										<tr>
											<td width="40" align="center"><html:checkbox property="modes" value="0"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="1" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="2" disabled="true"></html:checkbox></td>
											<td width="40" align="center"><html:checkbox property="modes" value="3" disabled="true"></html:checkbox></td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="1">&nbsp;</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right"> <html:submit>Search</html:submit></td>
										</tr>
									</table>
								</td>
								<td align="right">
									<table>
										<tr align="right">
											<td colspan="1" align="right">
											<button id="drop">Drop Markers</button> 
											</td>
										</tr>
									</table>
								</td>
							</tr>
							
						</tfoot>
					</table>
				</td>
				<td>
					<table  border="1">
						<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null}">
							<c:forEach var="path" items="${searchRouteForm.result.path}" varStatus="status">
								<tr>
									<td><c:out value="${path.name}"></c:out></td>
									<td><c:out value="${path.routeCode}"></c:out></td>
								</tr>
							</c:forEach>
							</c:if>
					</table>
				</td>
				<td>
					<c:if test="${! empty searchRouteForm && searchRouteForm.result ne null && false}">
						<img alt="Route Map" src='<c:out value="${searchRouteForm.result.map}"/>'>
					</c:if>
					<div id="map_canvas" style="width: 300px; height: 300px;">map div</div>
				</td>
			</tr>
		</table>
	</html:form>
<br>